<template>
	<view class="back-img">
		<top-heigth></top-heigth>
		<view>
			<uv-navbar bgColor="none" leftText="北京" :fixed="false" title="" :safeAreaInsetTop="false">
				<template v-slot:left>
					<view class="uv-nav-slot">
						<image src="/static/image/top-address.png" style="width: 40rpx; height: 40rpx;" mode=""></image>
						<view class="top-font">{{location && location.province ? location.province : '定位未开启'}}</view>
					</view>
				</template>
				<template v-slot:right>
					<view class="uv-nav-slot" >
						<view v-if="detail.isAuthentication == 0" style="color: #333;!important">未实名认证</view>
						<view v-if="detail.isAuthentication == 1" style="color: #333;!important">
							{{detail.staffName}}
						</view>
					</view>
				</template>
			</uv-navbar>
		</view>
			
		<view class="index-top m-t24" @click="goMonth(1)">
			<view class="index-top-l">
				<view class="box">
					<view class="font">
						<!-- <span>{{sum == ''? "0" : sum}}</span>元 -->
						<span>{{detail.nowOrderAmount}}</span>元
					</view>
					<view class="font2">本月收益</view>
				</view>
			</view>
			<view class="index-top-r">
				<view class="box">
					<view class="font">
						<!-- <span>{{myList.length}}</span>单 -->
						<span>{{detail.nowOrderCount}}</span>单
					</view>
					<view class="font2">本月单数</view>
				</view>
			</view>
		</view>
		<view class="content-box">
			<view class="public-box">
				<uv-row justify="space-between" gutter="10">
					<uv-col span="3" class="index-nav-box">
						<view class="box" @click="goPersonal()">
								<image src="/static/image/icon1.png" mode=""></image>
								<view class="font">个人信息</view>
						</view>
					</uv-col>
					<uv-col span="3" class="index-nav-box">
						<view class="box" @click="goSystem()">
								<image src="/static/image/icon2.png" mode=""></image>
								<view class="font">消息通知</view>
						</view>
					</uv-col>
					<uv-col span="3" class="index-nav-box">
						<view class="box" @click="goContract()">
								<image src="/static/image/icon3.png" mode=""></image>
								<view class="font">合同管理</view>
						</view>
					</uv-col>
					<uv-col span="3" class="index-nav-box">
						<view class="box" @click="goCash()">
								<image src="/static/image/icon4.png" mode=""></image>
								<view class="font">收入提现</view>
						</view>
					</uv-col>
				</uv-row>
			</view>
		</view>
		
		<view class="content-box m-t32">
			<view class="index-item-box">
				<view class="index-item">
					<view class="box1" @click="location ? toMapAPP(location.latitude, location.longitude, location.formattedAddress) : toMapAPP(null, null, null)">
						<h1>高德打车</h1>
						<view>HAIL A TAXI</view>
					</view>
				</view>
				<view class="index-item index-item-back2">
					<view class="box1" @click="tobaojing">
						<h1>一键报警</h1>
						<view>ONE-CLICK ALARM</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content-box">
			<view class="index-item-box m-t32">
				<view class="index-item index-item-back3" @click="goEvaluate()">
					<view class="box1">
						<h1>客户评价</h1>
						<view>CUSTOMER EVALUATION</view>
					</view>
				</view>
				<view class="index-item index-item-back4" @click="goTime">
					<view class="box1">
						<h1>接单时段</h1>
						<view>ORDETR RECEIVING PERI</view>
					</view>
				</view>
			</view>
		</view>

			
		
	</view>
</template>

<script>
	import TopHeigth from '@/components/TopHeigth.vue'
	import {checkLogin} from "@/util/checkLogin.js"
	
	export default {
		data() {
			return {
				userInfo: uni.getStorageSync('userInfo'),
				sum:'',
				startTime:'',
				endTime:'',
				myList:[],
				detail:'',
				title: 'Hello',
				location: null
			}
		},
		components: { TopHeigth },
		onShow() {
			this.getDetail()
		},
		mounted() {
			this.getStartTime()
			this.getEndTime()
			this.getList()
			uni.getLocation({
				type: 'gcj02',
				success: lres => {					
					uni.request({
						url:"https://restapi.amap.com/v3/geocode/regeo?key=8bb5265417fbf03e07a85e276baa162d&location="+lres.longitude+","+lres.latitude+"&poitype=&radius=1000&extensions=base&roadlevel=0",
						success:(res) => {
							if(res.statusCode == 200){
								var locationInfo = {
									country: res.data.regeocode.addressComponent.country,
									province: res.data.regeocode.addressComponent.province,
									district: res.data.regeocode.addressComponent.district,
									township: res.data.regeocode.addressComponent.township,
									formattedAddress: res.data.regeocode.formatted_address,
									longitude: lres.longitude,
									latitude: lres.latitude,
								}
								uni.setStorageSync('location', locationInfo);
								this.location = locationInfo;
								console.log(locationInfo)
							}
						}
					})
				},
				fail(e){
					console.log("location:", e)
					uni.setStorageSync('location', null);
					plus.nativeUI.alert("定位未授权");
				}
			})
		},
		methods: {
			getStartTime() {
			    let date = new Date()
			    date.setDate(1) // 将当前时间的日期设置成第一天
			    let year= date.getFullYear()  // 得到当前年份 
			    let month = date.getMonth()  + 1 // 得到当前月份（0-11月份，+1是当前月份）
			    month  = month > 10 ? month :'0' + month // 补零
			    let day  = date.getDate() // 得到当前天数，实际是本月第一天，因为前面setDate(1) 设置过了
				console.log(year +'-'+ month +'-'+ day) //03
				this.startTime = year + '-' + month + '-' + day
			    return new Date(year +'-'+ month +'-'+ day) // 这里传入的是字符串
			},
			getEndTime(){
			  let  date  = new Date()
			  let year = date.getFullYear()  
			  let month = date.getMonth() +1
			 // 这里传入的是整数时间，返回的是下个月的第一天，因为月份是0-11
			  let nextMonthFirthDay = new Date(year,month,1) // 下个月的第一天
			  console.log(nextMonthFirthDay)
			  let oneDay = 1000*60 * 60 * 24 // 一天的时间毫秒数
			  let endDay = new Date(nextMonthFirthDay - oneDay) 
			  let day = endDay.getDate() // 本月最后一天
				this.endTime = year + '-' + month + '-' + day
				
			  // 这里传入的是字符串格式的时间，返回的是传入字符串的时间
			  return new Date(year + '-' + month + '-' + day)
			},
			getDetail(){ // 技师详情
				uni.$u.http.post('/api/shop/v1_0/tAppStaffRCA/turnTAppStaffInfo',{
					id:this.userInfo.id,
				}).then((res) => {
					if(res.code == 400){
						return uni.redirectTo({
							url: "/pages/login/index"
						})
					}
					this.detail = res.data
				})
			},
			getList(){
					uni.$u.http.post('/api/shop/v1_0/tAppOrderRCA/queryStaffTAppOrder',{
						 staffId:this.userInfo.id,
						 statusArray:[2],
						 createTimeRange:[this.startTime,this.endTime]
					}).then((res) => {
						this.myList = res.aaData
						let aaa = []
						this.myList.forEach(function (element) {
							aaa.push(element.orderAmount)
							//console.log(element.orderAmount)
						})
						
						for (var i = 0; i < aaa.length; i++) {
							this.sum = this.sum * 1  + aaa[i] *1
						}
					})
			},
			goMonth(id){
				uni.navigateTo({
					url: "/pages/index/month?type=" + id
				})
			},
			//
			goPersonal(){
				uni.navigateTo({
					url: "/pages/index/personal"
				})
			},
			goSystem(){
				uni.navigateTo({
					url: "/pages/index/system"
				})
			},
			goContract(){
				uni.navigateTo({
					url: "/pages/index/contract"
				})
			},
			goCash(){
				uni.navigateTo({
					url: "/pages/index/cash"
				})
			},
			goEvaluate(){
				uni.navigateTo({
					url: "/pages/index/evaluate"
				})
			},
			goTime(){
				uni.navigateTo({
					url: "/pages/index/time"
				})
			},
			tobaojing(){
				uni.makePhoneCall({
					phoneNumber: '18310319013' //仅为示例
				});

			},
			toMapAPP(latitude,longitude,name){
				if(!latitude || !longitude || !name){
					plus.runtime.openURL(url, function(e) {
						plus.nativeUI.alert("未授权定位");
					});
					return 
				}
				let url = "";
				if (plus.os.name == "Android") {//判断是安卓端
					plus.nativeUI.actionSheet({//选择菜单
						title: "选择地图应用",
						cancel: "取消",
						buttons: [{title: "高德地图"}]
					}, function(e) {
						switch (e.index) {
							//下面是拼接url,不同系统以及不同地图都有不同的拼接字段
							case 1:
								url = `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
								break;
							default:
								break;
						}
						if (url != "") {
							url = encodeURI(url);
							//plus.runtime.openURL(url,function(e){})调起手机APP应用
							plus.runtime.openURL(url, function(e) {
								plus.nativeUI.alert("本机未安装高德地图应用");
							});
						}
					})
				} else {
					// iOS上获取本机是否安装了百度高德地图，需要在manifest里配置
					// 在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加
					//（如urlschemewhitelist:["iosamap","baidumap"]）  
					plus.nativeUI.actionSheet({
						title: "选择地图应用",
						cancel: "取消",
						buttons: [{title: "高德地图"}]
					}, function(e) {
						switch (e.index) {
							case 1:
								url = `iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
								break;
							default:
								break;
						}
						if (url != "") {
							url = encodeURI(url);
							plus.runtime.openURL(url, function(e) {
								plus.nativeUI.alert("本机未安装高德地图应用");
							});
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.demo-layout {
		height: 25px;
		border-radius: 4px;
	}
	.bg-purple {
		background: #CED7E1;
	}
	.bg-purple-light {
		background: #e5e9f2;
	}
	.bg-purple-dark {
		background: #99a9bf;
	}
	
	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}
	.uv-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: #dadbde;
		padding: 3px 7px;
		opacity: 0.8;
	}
	
	.content-box{
		padding: 0 32rpx;
	}
	
	.top-font{
		font-size: 30rpx;
		font-weight: bold;
	}
	
	.index-nav-box{
		display: flex;
		align-items: center;
		justify-content: center;
		.box{
			text-align: center;
		}
	}
	.index-nav-box image{
		width:92rpx;
		height: 92rpx;
		text-align: center;
	}
	.index-nav-box .font{
		text-align: center;
		font-size: 24rpx;
		color: #333;
		margin-top: 16rpx;
	}
	
	
	
	.back-img{
		background:#fff url("/static/image/back.png") no-repeat;
		background-size: 100% auto;
	}
	.red-back{
		// background: url("/static/image/line.png") no-repeat;
		background-size: 100% auto;
		 //background-image: linear-gradient (red 10%,blue)
	}
	.index-item-box{
		@include flex;
		align-items: center; 
		justify-content: space-between;
	}
	.index-item{
		width:48%;
		height: 160rpx;
		background:url("/static/image/index2.png") no-repeat;
		background-size: 100% 100% ;
		border-radius:24rpx;
		box-shadow: 0rpx 0rpx 20rpx 4rpx rgba(0,0,0,0.06);
		.box1{
			padding-top:32rpx;
			padding-left:32rpx;
			font-size: 20rpx;
			color: #0084BA;
			font-weight: 500;
			h1{
				font-size: 30rpx;
				margin-bottom:8rpx;
			}
		}
	}
	.index-item-back2{
		background:url("/static/image/index3.png") no-repeat !important;
		background-size: 100% 100% !important;
		.box1{
			color: #C8411D;
		}
	}
	.index-item-back3{
		background:url("/static/image/index4.png") no-repeat !important;
		background-size: 100% 100% !important;
		.box1{
			color: #D3770D;
		}
	}
	.index-item-back4{
		background:url("/static/image/index5.png") no-repeat !important;
		background-size: 100% 100% !important;
		.box1{
			color: #3469D3;
		}
	}
	
	.index-top{
		@include flex;
		align-items: center; 
		justify-content: flex-start;
		height: 200rpx;
		background:#fff url("/static/image/index1.png") no-repeat ;
		background-size: 100% 100%;
		border-radius:26rpx;
		margin: 0 32rpx;
		box-shadow: 0rpx 0rpx 20rpx 4rpx rgba(0,0,0,0.06);
		margin-bottom:24rpx;
		
		.index-top-l{
			width: 50%;
			@include flex;
			align-items: center; 
			justify-content: center;
			border-right: 2rpx solid #eee;
		}
		.index-top-r{
			width: calc(50% - 2rpx);
			@include flex;
			align-items: center; 
			justify-content: center;
		}
		.font{
			font-weight: bold;
			font-size: 28rpx;
			color: #333;
			margin-bottom: 8rpx;
			span{
				font-size: 48rpx;
				color: #333;
			}
		}
		.font2{
			font-size: 28rpx;
			color: #999999;
		}
	}
</style>
